<template>
  <div>
    <div id="topdiv">
      <div id="bb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>日志记录</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div id="vv">
        <el-button
          size="mini"
          type="primary"
          @click="loadme()"
          class="el-icon-refresh"
        ></el-button>
      </div>
    </div>
    <hr />

    <div id="div1">
      <div id="div3">
        <h5>
          共有数据:<a type="primary">{{ logs.length }}</a>
        </h5>
      </div>
    </div>
    <el-table
      ref="filterTable"
      :data="logs.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column
        prop="createtime"
        label="日期"
        sortable
        align="center"
        width="180"
        column-key="date"
      >
      </el-table-column>

      <el-table-column align="center" prop="ip" label="IP"> </el-table-column>
      <el-table-column
        align="center"
        label="操作人"
        prop="people.name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="身份"
        prop="roler.rolerName"
      ></el-table-column>
      <el-table-column
        align="center"
        label="请求路径"
        prop="action"
      ></el-table-column>
      <el-table-column
        align="center"
        label="请求说明"
        prop="logdesc"
      ></el-table-column>

      <el-table-column
        align="center"
        label="操作状态"
        prop="flag"
      ></el-table-column>
      <el-table-column
        style="color: white; border: none; background-color: #7ec9a1"
        align="center"
        show-overflow-tooltip="true"
        label="返回值"
        prop="myreturn"
      ></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="logs.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      currentPage: 1, //初始页
      pagesize: 10, //每页的数据

      logs: [],
    };
  },
  // 该模块内部创建成时执行created事件
  created: function () {
    this.$axios
      .get("/logs")
      .then((res) => {
        if (res.data.code == 200) {
          this.logs.length = 0; //清空原有数组内容
          this.logs = res.data.data; //在空数组追加相应的数据
          console.log(res.data);
        } else {
          this.$message(res.data.msg);
        }
      })
      .catch((error) => {
        console.log(error);
        this.$message(error.data.msg);
      });
  },

  methods: {
    loadme: function () {
      location.reload();
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
};
</script>
<style>
.el-tooltip__popper {
  max-width: 30%;
  background-color: rgb(67, 145, 212);
  line-height: 30px;
  color: #313131 !important;
  background: rgb(214, 253, 253) !important;
}

#upimgdiv .el-upload,
#upimgdiv .el-button,
#upimgdiv {
  height: 20px;
  width: 80px;
  margin: 4px 4px;
  line-height: 0px;
}
#div1 {
  height: 50px;
  line-height: 50px;
}
#topdiv {
  height: 50px;
}
#div2 {
  float: left;
}
#div3 {
  float: right;
  line-height: 20px;
}
#p1 {
  font-size: 15px;
  float: left;
}

#we {
  height: 50px;
  line-height: 30px;
  font-size: 18px;
}
#vv {
  line-height: 30px;
  float: right;
}
#divtable .el-table__header th,
#divtable .el-table__header tr {
  background-color: beige;
}
#bb {
  margin-top: 10px;
  float: left;
}
#divtable {
  line-height: 40px;
}
#sou {
  height: 34px !important;
}
.mod .el-form-item {
  float: left;
  margin-left: 20px;
  width: 400px;
}
.upimg {
  float: left;
}
.mod .el-date-picker,
.mod .el-input {
  float: left;
}
.mod .el-select {
  float: left;
  margin-left: 0;
}
.mod .el-input,
.mod .el-select {
  width: 300px;
}
.mod .el-dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  height: 68%;
  overflow: hidden;
}
.mod .el-dialog__body {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.mod .el-dialog__title {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.mod #footermod {
  width: 100%;
  height: 80px;
  position: absolute;
  clear: both;
  bottom: 60px;
}
.mod #footermod .el-button {
  width: 150px;
  margin-right: 30px;
}

.el-table__header th,
.el-table__header tr {
  padding: 0px 0px;
  color: black;
  line-height: 76px;
  font-size: 18px;
}
.addmod .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: aliceblue;
  width: 120px;
  height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.addmod .avatar-uploader .el-upload:hover {
  border-color: #409eff;
  width: 120px;
  height: 120px;
}
.addmod .avatar-uploader-icon {
  width: 120px;
  height: 120px;
  font-size: 28px;
  color: #8c939d;
  line-height: 120px;
  text-align: center;
}
.addmod .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
